<template>
	<view class="i-main">
		<view class="inx-top-box">
			<view class="top-search">
				<up-input placeholder="请输入单据编号或标题" prefixIcon="search" shape="circle" v-model="searchText"
					prefixIconStyle="font-size: 22px;color: #909399" @change="searchChange"
					:clearable="true"></up-input>
				<up-button :customStyle="{ width: '70px' }" shape="circle" type="primary" text="查询"
					@click="refresherrefresh"></up-button>
			</view>
			<up-dropdown>
				<up-dropdown-item v-model="businessValue" title="业务模块" :options="businessModule"
					@change="changeBusiness"></up-dropdown-item>
				<up-dropdown-item v-model="billValue" title="单据类型" :options="billType"
					@change="changeBill"></up-dropdown-item>
				<up-dropdown-item v-model="sortValue" title="排序" :options="timeOptions"
					@change="changeSort"></up-dropdown-item>
			</up-dropdown>
			<view class="filtter-box">
				<up-tabs :list="tabList" @change="changeTab"></up-tabs>
				<!-- <u-picker :show="show" :columns="columns" keyName="label" @cancel="show = false"></u-picker> -->
				<!-- <up-button :customStyle="{ width: '70px', margin: '0' }" shape="circle" size="small"
					@click="openPicker">排序</up-button> -->
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view-list" @refresherpulling="onPulling"
			@refresherrestore="onRestore" @refresherrefresh="refresherrefresh" :refresher-enabled="true"
			:refresher-triggered="triggered" @scrolltolower="scrolltolower">
			<up-cell v-for="(item, index) in list" :key="index" :title="item.F_TITLE"
				:label="`${item.F_YWLX}&nbsp&nbsp${item.F_DJBH}`" :isLink="true" arrow-direction="arrow-right"
				@click="getInfo(item)">
				<template #right-icon>
					<view class="right-box">
						<up-button :customStyle="{ width: '70px', margin: '0' }" type="primary" shape="circle"
							size="small" @click="goTransact(item)">办理</up-button>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</template>
			</up-cell>
			<info-popup v-model="showPop" :data="popData"></info-popup>
			<view class="more-box">
				<up-loadmore :status="loadmoreStatus" />
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
import {
	ref,
	reactive
} from "vue"
import { getBusinessModule, getBillType, getHomeList } from "@/api"
import { onBackPress, onLoad, onShow } from '@dcloudio/uni-app'

import { useRouter } from '@/uni-simple-router';

uni.setNavigationBarTitle({
	title: "任务"
});
const router = useRouter();
let loadmoreStatus = ref('loading')
let tabList = [{
	name: '待办业务',
	value: 'ToDoTask'
}, {
	name: '已办业务',
	value: 'CompleteTask'
}, {
	name: '我的单据',
	value: 'MyBill'
}, {
	name: '我的退单',
	value: 'MyReturnToTask'
}]


let timeOptions = [{
	label: '默认',
	value: ''
}, {
	label: '时间倒序',
	value: 'DESC'
}, {
	label: '时间正序',
	value: 'ASC'
}]
let hasMore = ref(true)
// 业务
let businessValue = ref('')
// 单据
let billValue = ref('')
// 排序
let sortValue = ref('')

let searchText = ref('')

let businessModule = ref([])
getBusinessModule().then(res => {
	console.log(res);
	if (res && res.code == 200) {
		let data = JSON.parse(res.data);
		data.some((item) => {
			item.value = item.id
		})
		data.unshift({
			id: '',
			label: '无',
			value: ''
		})
		businessModule.value = data;
	}
})
let billType = ref([
	{ label: '请先选择业务模块', value: '', id: '' }
])

let searchChange = (data) => {
	if (data == '') {
		setTimeout(() => {
			refresherrefresh()
		}, 200);
	}
}

let taskTypeValue = 'ToDoTask';
let nowPage = 0;
let list = ref([])

let userInfo = uni.getStorageSync('userInfo') || {};
let getHomeListData = () => {
	if (loadmoreStatus.value == 'nomore') return false;
	// uni.showLoading({
	// 	title: '加载中'
	// });
	let data = {
		taskType: taskTypeValue,
		bizModel: businessValue.value,
		bizType: billValue.value,
		search: searchText.value,
		pageSize: 20,
		currentPage: nowPage,
		orderBy: sortValue.value,
		userid: userInfo.userId
	}
	getHomeList(data).then(res => {
		if (res.code == 200) {
			let arr = JSON.parse(res.data);
			list.value.push(...arr);
			if (arr.length < 10) {
				loadmoreStatus.value = 'nomore'
			}
		} else {
			uni.showToast({
				title: res.message,
				icon: "none",
				duration: 3000
			})
		}
		triggered.value = false;

		uni.hideLoading();
	}).catch(err => {
		console.log(err);
		triggered.value = false;
		uni.hideLoading();
	})
}

getHomeListData()

let changeSort = (data) => {
	refresherrefresh()
}

let changeBill = (data) => {
	refresherrefresh()
}

let changeTab = (data) => {
	taskTypeValue = data.value;
	refresherrefresh()
}

let changeBusiness = (data) => {
	if (data == '') {
		billType.value = [{
			label: '请先选择业务模块',
			value: '',
			id: ''
		}]
		billValue.value = '';
		refresherrefresh();
		return
	}
	refresherrefresh();
	getBillType(data).then(res => {
		if (res.code == 200) {
			let data = JSON.parse(res.data);
			data.some((item) => {
				item.value = item.id
			})
			data.unshift({
				id: '',
				label: '无',
				value: ''
			})
			billType.value = data
		}
	})
	getHomeListData()
}

let show = ref(false);
const columns = reactive([
	[{
		label: '时间升序',
		value: 1,
	},
	{
		label: '时间降序',
		value: 2,
	},
	]
]);


let showPop = ref(false);
let popData = ref({})
let getInfo = (data) => {
	popData.value = data
	showPop.value = true;
}

let goTransact = (info) => {
	console.log('info---------', info);

	let id = info.F_GUID;
	let type = info.F_YWLX;
	let m = info.F_MDL
	let n = info.F_NODE;
	let v = taskTypeValue;
	console.log('m', m);

	router.push({ path: `/info?t=${type}&guid=${id}&m=${m}&n=${n}&v=${v}` })
}


let triggered = ref(false)
let onPulling = (e) => {
	triggered.value = true;
}

let onRestore = () => {
	triggered.value = 'restore'; // 需要重置
}

let refresherrefresh = () => {
	nowPage = 0;
	loadmoreStatus.value = 'loading';
	list.value = [];
	getHomeListData()
	// setTimeout(() => {
	// 	triggered.value = false;
	// }, 4000)
}

let scrolltolower = () => {
	nowPage++;
	getHomeListData()
}

// onload(()=>{
// 	getHomeListData()
// })

onShow(()=>{
	// loadmoreStatus.value = 'loading';
	// getHomeListData();
	console.log('setup中的onShow');
})

onBackPress(() => {
	window.location.reload();
})

</script>
<style lang="scss" scoped>
// page {
// 	background-color: #ededed;
// }
.i-main {
	width: 100%;
	box-sizing: border-box;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #F5F5F6;
	overflow: hidden;
}

.top-search {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;

	.search-input {
		flex-shrink: 0;
	}
}

.filtter-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;
}

.collapse-main {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c-m-row {
	display: flex;
	// justify-content:  space-between;
	flex-wrap: wrap;
	gap: 10px 10px;

	.row-item {
		width: 48%;
	}

	// .row-item:not(:nth-child(2n)) {
	//     margin-right: calc(2% / 3);
	// }

}

.item-value {
	display: flex;
	flex-direction: column;
	font-size: 13px;

	.down {
		color: #aaa;
	}
}

.scroll-view-box {
	// margin-top: 40px;
	// height: 500px;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
	height: calc(100vh - 55px);
}

.scroll-view-list {
	//flex: 1;
	height: calc(100% - 147px);
	box-sizing: border-box;
	width: calc(100% - 20px);
	margin: 10px auto 0;
	background: #fff;
	padding: 10px 10px;
	box-sizing: border-box;
	border-radius: 15px;
}

.right-box {
	display: flex;
	align-items: center;
	gap: 20px;
}

.inx-top-box {
	flex: 1;
	background-color: #fff;
	padding: 10px 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

.title-pop {
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-weight: 600;
}

.more-box {
	padding: 10px 0;
}
</style>